<template>
    <div class="budgetTabelPagePage">
        <div class="search-wrap d-flex a-center">
            <!--  <div class="search-item d-flex a-center">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门" clearable>
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>-->
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-select v-model="form.projectId" class="m-l5" placeholder="请选择项目" clearable>
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>季度</label>
                <el-select class="m-l10" v-model="form.quarter" clearable>
                    <el-option label="第一季度" value="1"></el-option>
                    <el-option label="第二季度" value="2"></el-option>
                    <el-option label="第三季度" value="3"></el-option>
                    <el-option label="第四季度" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                    @click="addHandle"
                    class="button_edit m-r10"
                >新增</el-button>
                <el-button
                    class="button_edit"
                    @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #initialStageData="scope">
                <span v-if="!scope.row.isEdit">{{scope.row.initialStageData}}</span>
                <el-input
                    v-else
                    v-model="scope.row.initialStageData"
                    placeholder="请输入期初数据"
                    @input="scope.row.initialStageData = limitInputNum(scope.row.initialStageData,8,0,false)"
                ></el-input>
            </template>
            <template #lateData="scope">
                <span v-if="!scope.row.isEdit">{{scope.row.lateData}}</span>
                <el-input
                    v-else
                    v-model="scope.row.lateData"
                    placeholder="请输入末期数据"
                    @input="scope.row.lateData = limitInputNum(scope.row.lateData,8,0,false)"
                ></el-input>
            </template>
            <template #update="scope">
                <el-button
                    v-permission
                    class="button_edit"
                    @click="onEdit(scope.row)"
                >编辑</el-button>
                <el-button
                    v-if="scope.row.isEdit"
                    class="button_view"
                    @click="onSave(scope.row)"
                    :loading="scope.row.loading"
                >保存</el-button>
            </template>
        </public-table>
    </div>
    <!-- 新增基础数据 -->
    <public-dialog
        :title="'基础数据录入'"
        :width="'50%'"
        :confirmButtonTitle="'确认'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                ref="form2Ref"
                :model="form2"
                :rules="form2Rules"
                label-width="120"
            >
                <div class="title-box">
                    <span>基础信息</span>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目" prop="projectId">
                            <el-select v-model="form2.projectId" class="m-l5" placeholder="请选择项目" clearable>
                                <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门" prop="departmentId">
                            <el-select v-model="form2.departmentId" class="m-l5" placeholder="请选择部门" clearable>
                                <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年度" prop="year">
                            <el-date-picker
                                class="m-l5"
                                clearable
                                v-model="form2.year"
                                value-format="YYYY"
                                size="large"
                                type="year"
                                placeholder="请选择"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="季度" prop="quarter">
                            <el-select v-model="form2.quarter" class="m-l5" placeholder="请选择季度" clearable>
                                <el-option label="第一季度" value="1"></el-option>
                                <el-option label="第二季度" value="2"></el-option>
                                <el-option label="第三季度" value="3"></el-option>
                                <el-option label="第四季度" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="title-box">
                    <span>数据信息</span>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="数据名称" prop="budgetOwnershipInterestName">
                            <el-input v-model="form2.budgetOwnershipInterestName" placeholder="请输入数据名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="期初数据" prop="initialStageData">
                            <el-input
                                v-model="form2.initialStageData"
                                placeholder="请输入期初数据"
                                @input="form2.initialStageData = limitInputNum(form2.initialStageData,6,0,false)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="期末数据" prop="lateData">
                            <el-input
                                v-model="form2.lateData"
                                placeholder="请输入期末数据"
                                @input="form2.lateData = limitInputNum(form2.lateData,6,0,false)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </public-dialog>
</template>

<script setup>
import {budgetManagement, exportApi, fundManagementApi} from "@/api/businessFinance";
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDatePicker,
    ElMessage,
    ElButton, ElDivider,
    ElForm,
    ElFormItem,
    ElRow,ElCol
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {exportExcelFile, limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "项目名称 ", prop: "projectName", minWidth: 80 },
    { label: "年度 ", prop: "year", minWidth: 60 },
    { label: "季度 ", prop: "quarter", minWidth: 60 },
    { label: "数据名称 ", prop: "budgetOwnershipInterestName", minWidth: 80 },
    { label: "期初数据 ", prop: "initialStageData",slot: true,slotName: 'initialStageData', minWidth: 80 },
    { label: "期末数据 ", prop: "lateData",slot: true,slotName: 'lateData', minWidth: 80 },
    { label: "净资产收益率 ", prop: "roe", minWidth: 120 },
    { label: "操作 ", prop: "update",slot:true, minWidth: 270 },
]);

const form = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:''
});

const form2 = reactive({
    departmentId: '',
    year: '',
    quarter: '',
    projectId: '',
    budgetOwnershipInterestName: '',
    initialStageData: '',
    lateData: ''
});
const form2Ref = ref(null);
const form2Rules = reactive({
    departmentId:[
        { required: true, message: '请选择部门', trigger: 'change' },
    ],
    year:[
        { required: true, message: '请选择年度', trigger: 'change' },
    ],
    quarter:[
        { required: true, message: '请选择季度', trigger: 'change' },
    ],
    projectId:[
        { required: true, message: '请选择项目', trigger: 'change' },
    ],
    budgetOwnershipInterestName:[
        { required: true, message: '请输入数据名称', trigger: 'blur' },
    ],
    initialStageData:[
        { required: true, message: '请输入期初数据', trigger: 'blur' },
    ],
    lateData:[
        { required: true, message: '请输入末期数据', trigger: 'blur' },
    ],
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        res.data.forEach(item=>{
           item.isEdit = false;
           item.loading = false;
        });
        projectList.value = res.data;
    });
}

const getBudgetOwnershipInterestVo = (param) => {
    budgetManagement.getBudgetOwnershipInterestVo(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetOwnershipInterestVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetOwnershipInterestVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetOwnershipInterestVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.getBudgetOwnershipInterestLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'所有这权益表');
        }
    });
}

/**
 * 新增所有权益者数据
 *
 */
const addBudgetOwnershipInterest = (param,callback) => {
    budgetManagement.addBudgetOwnershipInterest(param).then(res=>{
        if(res.code === '200'){
            if(callback)callback(res);
        }
    });
}

const visible = ref(false);
const onConfirm = () => {
    form2Ref.value.validate((valid, fields) => {
        if (valid) {
            addBudgetOwnershipInterest(form2,()=>{
                visible.value = false;
                ElMessage.success('新增成功!');
                getBudgetOwnershipInterestVo({
                    pageNum: 1,
                    pageSize: 10
                });
            });
        } else {
            console.log('error submit!', fields)
        }
    });
}

// 编辑
const onEdit = (item) => {
    item.isEdit = true;
}

const updateBudgetOwnershipInterestVo = (param,callback) => {
  budgetManagement.updateBudgetOwnershipInterestVo(param).then(res=>{
      if(res.code === '200'){
          if(callback)callback();
      }
  });
}

const onSave = (item) => {
    item.loading = true;
    updateBudgetOwnershipInterestVo({
        budgetOwnershipInterestId:item.budgetOwnershipInterestId,
        initialStageData:item.initialStageData,
        lateData:item.lateData
    },()=>{
        item.isEdit = false;
        setTimeout(()=>{
            item.loading = false;
            ElMessage.success('保存成功!');
        },1000);
    });
}

const addHandle = () => {
    visible.value = true;
}

onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getBudgetOwnershipInterestVo({
        pageNum: 1,
        pageSize: 10
    });
});
</script>

<style lang="scss" scoped>
.budgetTabelPagePage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
   .title-box{
       height: 40px;
       span{
           font-size: 15px;
           font-weight: 600;
       }
   }
}
</style>
